
<template>
  <div class="paycontent">
    <pay-cost-header title="自主缴费">
      <i class="iconback"
         slot="back"
         @click="headBackClick"></i>
    </pay-cost-header>
    <h3 class="paytitle">欢迎使用青海省肿瘤医院自主缴费系统</h3>
    <div class="infobox">
      <div class="leftinfo">
        <h3>扫码支付</h3>
        <img src="../../../static/images/pay/hand.png">
        <p v-if="tipflag">请扫描右侧二维码完成支付</p>
        <p v-else>支付成功！</p>
        <div class="paymoney">支付金额：
          <span>
            <sub>￥</sub>{{moneyVal}}</span>
        </div>
      </div>
      <div class="rightcode">
        <div class="codeimg"
             v-if="tipflag">
          <div class="erweima"
               id="qrcode"></div>
        </div>
        <div class="successcover"
             v-if="!tipflag">
          <img src="../../../static/images/pay/paysuccess.png">
          <p>支付成功！</p>
        </div>
      </div>
    </div>
    <p class="wishtip">祝您早日康复</p>

    <div v-if="backfalg"
         class="add-pop-up">
      <div class="shade"></div>
      <div class="tipcont">
        <p>您正在缴费中，确定要退出吗?</p>
        <div class="btn">
          <button class="cancel"
                  @click="quit">取消</button>
          <button class="confirm"
                  @click="confirmAdd">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import urls from '../../common.js'
import Bus from '../../bus'
import QRCode from 'qrcodejs2' // 引入qrcode生产二维码的
import PayCostHeader from '../common/PayCostHeader'
export default {
  name: 'SweepCodePay',
  components: {
    PayCostHeader
  },
  data () {
    return {
      tipflag: true,
      backfalg: false,
      moneyVal: '',
      userPayInfo: {},
      codeUrl: '',
      osNumber: '',
      backStatus: 0
    }
  },
  created () {
    Bus.$on('money', (val) => {
      this.moneyVal = val
    })
  },
  mounted () {
    this.userPayInfo = this.$store.state.payInfo
    this.$set(this.userPayInfo, 'total_amount', this.moneyVal)
    this.payInfo()

    this.timer = window.setInterval(() => {
      setTimeout(this.getPayStatus(), 0)
    }, 1500)
  },
  beforeDestroy () { // 离开的时候清除监听事件
    Bus.$off('money')
  },
  destroyed () { // 离开时清除定时器
    clearInterval(this.timer)
  },
  methods: {
    headBackClick () {
      if (this.backStatus === 1) {
        this.$router.push('/prepaymentinfo')
      } else {
        this.backfalg = true
      }
    },
    quit () {
      this.backfalg = false
    },
    confirmAdd () {
      this.$router.push('/prepaymentinfo')
    },
    payInfo () {
      let _this = this
      _this.$http.post(urls.generateSelfPayment, this.userPayInfo).then(result => {
        if (result.body.code === '200') {
          this.codeUrl = result.body.data.code_url
          this.$store.commit('getOrderSerialNumber', result.body.data.selfpayment.order_serial_number)
          this.qrcode()
        }
      })
    },
    getPayStatus () {
      let _this = this
      _this.osNumber = _this.$store.state.orderSerialNumber
      if (_this.osNumber) {
        _this.$http.get(urls.querySelfPayment + '/' + this.osNumber).then(result => {
          if (result.body.code === '200') {
            if (result.body.data.status === 1) {
              this.tipflag = false
              this.backStatus = 1
              clearInterval(this.timer)
            }
          }
        })
      }
    },
    qrcode () {
      // 生成二维码
      var that = this
      let qrcode = new QRCode('qrcode', {
        text: that.codeUrl, // 二维码内容
        background: '#f0f',
        foreground: '#ff0',
        width: 200,
        height: 200
      })
      console.log(qrcode)
    }
  },
  props: ['erweima']
}
</script>

<style style="stylus" scoped>
.paycontent {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(../../../static/images/pay/pay.png) 100% 100%;
  background-size: 100% 100%;
}
.iconback {
  display: inline-block;
  width: 0.18rem;
  height: 0.3rem;
  background: url(../../../static/images/pay/back.png) 100% 100%;
  background-size: 100% 100%;
  vertical-align: -0.04rem;
  margin-right: 0.08rem;
  cursor: pointer;
}
.paytitle {
  text-align: center;
  font-size: 0.46rem;
  color: #666;
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 0.8rem;
}
.infobox {
  width: 12rem;
  height: 6rem;
  border-radius: 0.2rem;
  background: #f7f8fa;
  box-shadow: 0px 11px 24px 0px rgba(127, 135, 143, 0.1);
  margin: 0 auto;
  overflow: hidden;
  clear: both;
}
.leftinfo {
  width: 6rem;
  text-align: center;
  float: left;
}
.leftinfo h3 {
  font-size: 0.3rem;
  color: #49cfbf;
  padding: 0.8rem 0 0.4rem 0;
}
.leftinfo img {
  display: inline-block;
  width: 0.97rem;
  height: 1.31rem;
}
.leftinfo p {
  font-size: 0.3rem;
  color: #333;
  padding: 0.4rem 0 0.7rem 0;
}
.leftinfo .paymoney {
  font-size: 0.3rem;
  color: #333;
}
.leftinfo .paymoney span {
  font-size: 0.6rem;
  color: #49cfbf;
}
.leftinfo .paymoney span sub {
  font-size: 0.3rem;
  vertical-align: 0.06rem;
  margin-right: 0.03rem;
}
.rightcode {
  float: left;
  margin: 1.2rem 0 0 1.2rem;
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
  box-sizing: content-box;
}
.rightcode .codeimg {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto;
  position: relative;
}
.rightcode .codeimg img {
  width: 100%;
  display: block;
}
.successcover {
  position: absolute;
  left: 0;
  right: 0;
  top: -0.2rem;
  bottom: 0;
}
.successcover .iconsuccess {
  display: inline-block;
  width: 1.19rem;
  height: 1.2rem;
  background: url(../../../static/images/pay/success.png) 100% 100%;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.6rem 0 0 -0.6rem;
}
.successcover p {
  font-size: 0.3rem;
  color: #49cfbf;
  text-align: center;
  margin-top: 0.3rem;
}
.successcover img {
  width: 100%;
}
.wishtip {
  text-align: center;
  font-size: 0.22rem;
  color: #aaa;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.35rem;
}
#qrcode {
  width: 4rem;
  height: 4rem;
}
.add-pop-up {
  background: #fff;
  width: 6rem;
  height: 2rem;
  text-align: center;
  border-radius: 0.2rem;
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -1rem 0 0 -3rem;
}
.add-pop-up .shade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
.add-pop-up .tipcont {
  width: 6rem;
  height: 2rem;
  text-align: center;
  border-radius: 0.2rem;
  background: #fff;
  position: relative;
  z-index: 10;
}
.add-pop-up .tipcont p {
  line-height: 1;
  padding: 0.4rem 0 0.2rem 0;
  font-size: 0.24rem;
  margin-bottom: 0.3rem;
}
.add-pop-up .tipcont button {
  display: inline-block;
  width: 1.2rem;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  font-size: 0.24rem;
  color: #27ae9e;
  background: #fff;
  border: 1px solid #27ae9e;
  border-radius: 0.05rem;
  margin: 0 0.1rem;
}
.add-pop-up .tipcont button.confirm {
  background: #27ae9e;
  color: #fff;
}
</style>
